
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript" src="../js/vue.js"></script>
    <style>

    </style>
</head>
<body>
<div id="div1" class="level1" >
    <div>{{msg1}}</div>
    <menu-item></menu-item>
    <menu-item msg11="values1"></menu-item>   <!--已有的属性为空，可以通过属性赋值 自定义参数-->
    <menu-item :msg11="msg2" msg13="values13" msg12="values12"></menu-item>     <!--引用父级组件定义好的参数-->
</div>

<script type="text/javascript">
    /*
      组件之间的参数传递：
    */
    Vue.component("menu-item", {
        props: ['msg11', 'msg12'],
        data: function () {
            return {
                msg: "组件本身的msg",

            };
        },
        template: '<div>{{msg}} - {{msg11}} - {{msg12}}</div>',
    });

    const vm = new Vue({
        el: '#div1',
        data: {
            msg1: '组件参数1',
            msg2: '组件参数2',


        }
    });
</script>
</body>
</html>
